<script setup>
import { ref } from 'vue'

//搜索模块
let activeModeIndex = ref(0)
let showModeSelect = ref(false)

const searchMode = [
  { label: '菜品', value: 'dish', icon: 'caipin' },
  { label: '店铺', value: 'merchant', icon: 'shangpu' },
  { label: '食材', value: 'ingredient', icon: 'shicai' }
]

const searchContent = ref('')

// 切换搜索模式
const toggleModeSelect = () => {
  showModeSelect.value = !showModeSelect.value
}

// 选择搜索模式
const selectMode = (index, event) => {
  // 阻止事件冒泡
  if (event) {
    event.stopPropagation()
  }
  activeModeIndex.value = index
  showModeSelect.value = false
}

// 搜索函数
const search = () => {
  if (!searchContent.value.trim()) {
    uni.showToast({
      title: '请输入搜索内容',
      icon: 'none'
    })
    return
  }

  const selectedMode = searchMode[activeModeIndex.value]
  //跳转到搜索结果页面
  uni.navigateTo({
    url: `/pages/Search/index?type=${selectedMode.value}&keyword=${encodeURIComponent(searchContent.value.trim())}`
  })
}
</script>

<template>
  <!-- 聚合搜索框 -->
  <view class="search-container">
    <view class="search-box">
      <!-- 搜索模式选择器 -->
      <view class="mode-select-container" @tap="toggleModeSelect">
        <view class="mode-select-trigger">
          <text :class="'iconfont icon-' + searchMode[activeModeIndex].icon"></text>
          <text class="mode-label">{{ searchMode[activeModeIndex].label }}</text>
          <text class="iconfont icon-arrow" :class="{ 'rotate': showModeSelect }"></text>
        </view>
        
        <!-- 下拉选项 -->
        <view v-if="showModeSelect" class="mode-options">
          <view 
            v-for="(item, index) in searchMode" 
            :key="item.value"
            class="mode-option"
            :class="{ 'active': index === activeModeIndex }"
            @tap.stop="selectMode(index, $event)"
          >
            <text :class="'iconfont icon-' + item.icon"></text>
            <text>{{ item.label }}</text>
          </view>
        </view>
      </view>
      
      <!-- 输入框 -->
      <view class="input-container">
        <input
          class="search-input"
          type="text"
          :placeholder="'搜索' + searchMode[activeModeIndex].label"
          v-model="searchContent"
          confirm-type="search"
          @confirm="search"
        />
      </view>
      
      <!-- 搜索按钮 -->
      <view class="search-button-container" @tap="search">
        <view class="search-button">
          <text class="iconfont icon-sousuo"></text>
        </view>
      </view>
    </view>
    
    <!-- 遮罩层 -->
    <view v-if="showModeSelect" class="overlay" @tap="showModeSelect = false"></view>
  </view>
</template>

<style scoped lang="scss">
.search-container {
  width: 100%;
  margin-top: 20rpx;
  position: relative;
}

.search-box {
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 100rpx;
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  z-index: 100;
}

.mode-select-container {
  flex-shrink: 0;
  position: relative;
  width: 240rpx;
  
  .mode-select-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;
    padding: 0 24rpx;
    border-right: 2rpx solid rgba(102, 126, 234, 0.15);
    background: transparent;
    transition: all 0.3s ease;
    border-radius: 100rpx 0 0 100rpx;
    
    .iconfont:first-child {
      margin-right: 12rpx;
      font-size: 32rpx;
      color: #667eea;
    }
    
    .mode-label {
      color: #667eea;
      font-weight: 600;
      font-size: 28rpx;
      margin-right: 8rpx;
    }
    
    .icon-arrow {
      font-size: 24rpx;
      color: #667eea;
      transition: transform 0.3s ease;
      
      &.rotate {
        transform: rotate(180deg);
      }
    }
    
    &:active {
      background: rgba(102, 126, 234, 0.05);
    }
  }
  
  .mode-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20rpx);
    border-radius: 20rpx;
    box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.15);
    border: 2rpx solid rgba(255, 255, 255, 0.2);
    margin-top: 8rpx;
    z-index: 9999;
    overflow: hidden;
    max-width: 240rpx;
    
    .mode-option {
      display: flex;
      align-items: center;
      padding: 20rpx 24rpx;
      transition: all 0.3s ease;
      
      .iconfont {
        margin-right: 12rpx;
        font-size: 32rpx;
        color: #666;
      }
      
      text:last-child {
        font-size: 28rpx;
        color: #333;
      }
      
      &.active {
        background: rgba(102, 126, 234, 0.1);
        
        .iconfont {
          color: #667eea;
        }
        
        text:last-child {
          color: #667eea;
          font-weight: 600;
        }
      }
      
      &:active {
        background: rgba(102, 126, 234, 0.05);
      }
      
      &:not(:last-child) {
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
      }
    }
  }
}

.input-container {
  flex: 1;
  
  .search-input {
    height: 100rpx;
    padding: 0 32rpx;
    font-size: 32rpx;
    color: #333;
    background: transparent;
    border: none;
    outline: none;
    border-radius: 0 100rpx 100rpx 0;
    
    &::placeholder {
      color: #999;
      font-size: 30rpx;
    }
  }
}

.search-button-container {
  flex-shrink: 0;
  
  .search-button {
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(45deg, #667eea, #764ba2);
    border: none;
    border-radius: 0 100rpx 100rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    
    .iconfont {
      font-size: 40rpx;
      color: white;
    }
    
    &:active {
      background: linear-gradient(45deg, #764ba2, #667eea);
      transform: scale(0.98);
    }
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
}

/* #ifndef MP-WEIXIN */
/* 额外添加hover效果的模拟 */
.search-box:hover {
  box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.15);
  transform: translateY(-4rpx);
}

.mode-select-trigger:hover {
  background: rgba(102, 126, 234, 0.05);
}

.search-button:hover {
  background: linear-gradient(45deg, #764ba2, #667eea);
  transform: scale(1.05);
}
/* #endif */
</style>
